<template>
  <div>
    <div class="title">child</div>
    <br />
    <div>{{ attrtitle }} -- {{ age }}</div>
    <br />
    <button @click="addAge">+++++</button>
  </div>
</template>

<script>
// js，业务代码
export default {
  // 在vue中接受父组件通过自定义属性传过来的数据,通过配置props来接受
  // props它是单向数据源,不能在子组件中直接去修改它,应该通过它所传过来父组件修改
  // 语法 props: 数组 | 对象
  // 数组: 此方式,一般用于你自己定义组件给自己所用  简写方式
  // 对象: 封装的组件提供给别人使用,它可以限制属性的类型和默认值
  // ========  数组
  // 数组中的元素就是你自定义的属性名称
  // props: ['attrtitle'],
  // ========  对象
  props: {
    // key名称就是你自定义属性名称
    // 类型首字母大写
    // attrtitle: String
    attrtitle: {
      type: String,
      // 直接给值 [基础类型] | 回调函数 [基础类型和引用类型都可以,引用类型设置默认值必须是此方案]
      default: '我是一个字符串'
    },
    age: {
      type: Number,
      default: () => 10,
      validator: value => {
        if (value > 900) {
          // throw new Error('值大于90')
          return false
        }
        return true
      }
    },
    setAge: Function
  },
  methods: {
    addAge() {
      // this.setAge(2)
      // 通过给当前的组件定义一个自定义的事情,完成子向父
      // 参数1:自定义事件的名称,参数2以后,它是传过去的数据
      // this.$emit('onSetAge',......参数)
      this.$emit('onSetAge', 10)
    }
  }

  // created() {
  //   // 在js中获取props数据
  //   console.log(this.attrtitle)
  // }
}
</script>

<style lang="scss" scoped>
/* 
lang 指定当前的css的预处理脚本，如果没有，则使用css，如果有一定要安装时，选中对应方案
scoped  样式作用域  名称保护  命名空间  在编译的时候，给绑定的css元素添加一个不重复的hash字符串，当前属性名称，然后它在通过css3的属性选择器来完成定义样式
*/
.title {
  color: red;
}
</style>
